<!-- 离职申请 -->
<template>
  <div class="rthcHead">
    <div class="rthcImg">
      <img src="@/assets/img/personnelImage/岗位需求库.png">
      <span class="rthcTi" title="员工离职台账">员工离职台账</span>
    </div>
    <div class="rthc-handle">
      <span class="rthc-handle-pri" style="margin-left: 20px">
        <el-button type="primary" @click="arLink">离职申请</el-button>
      </span>
      <div class="rthc-handle-more">
       <el-dropdown>
          <el-icon>
            <setting/>
        </el-icon>
       <template v-slot:dropdown>
         <el-dropdown-menu>
           <el-dropdown-item icon="el-icon-plus" @click="arLink">离职申请</el-dropdown-item>
<!--           <el-dropdown-item icon="el-icon-circle-plus-outline">流程审批</el-dropdown-item>-->
           <el-dropdown-item icon="el-icon-check" @click="delResById">同意</el-dropdown-item>
           <el-dropdown-item icon="el-icon-check" @click="uptById">驳回</el-dropdown-item>
         </el-dropdown-menu>
       </template>
    </el-dropdown>
      </div>
    </div>
  </div>
  <div style="height: 70%; min-height: 210px;">
    <div class="rthc-list-table" style="margin-top: 0">
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          :header-cell-style="{background:'#F7FBFE',color:'#606266'}"
          @selection-change="handleSelectionChange">
        <el-table-column
            :selectable="selectableStatus"
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column type="expand">
          <template #default="props">
            <img :src="props.row.empVo.resume.personalPhoto" width="460px" height="649px"/>
            <p>姓名: {{ props.row.empVo.resume.name}}</p>
            <p>性别: {{ props.row.empVo.resume.sex}}</p>
            <p>部门: {{ props.row.empVo.dept.deptName }}</p>
            <p>岗位: {{ props.row.empVo.position.name }}</p>
            <p>上级: {{ props.row.empVo.superior.empName}}</p>
            <p>状态:
              <el-tag v-if="props.row.resign.status === 0">在职</el-tag>
              <el-tag class="ml-2" type="success" v-else-if="props.row.resign.status === 1">离职</el-tag>
            </p>
            <p>电话: {{ props.row.empVo.resume.contactPhone}}</p>
            <p>邮件: {{ props.row.empVo.resume.email }}</p>
          </template>
        </el-table-column>
        <el-table-column label="申请人" prop="empVo.resume.name" />
        <el-table-column label="申请人部门" prop="empVo.dept.deptName" />
        <el-table-column label="现任岗位" prop="empVo.position.name" />
        <el-table-column label="提交日期" prop="resign.date" />
        <el-table-column label="流程ID" prop="resign.processId" />
        <el-table-column label="当前状态" prop="resign.status" :formatter="stateChange"/>
      </el-table>
      <div class="pag-block footer" style="">
        <el-pagination
            @current-change="handleCurrentChange"
            :total="paging.total"
            :page-size="paging.pageSize"
            :hide-on-single-page="hidePaging"
        />
      </div>
    </div>
  </div>
</template>

<script>
import {delByResId, selAll, uptByResId} from "../../../network/per/emplHandling";

export default {
  data() {
    return {
      paging: {
        pageNum: 1,
        pageSize: 5,
        total: null,
      },
      hidePaging: false,
      restaurants: [],
      state: '',
      tableData: null,
      multipleSelection: [],
      // 离职
      resIds:[],
    }
  },
  mounted() {
    this.init();
    },
  methods: {
    init(){
      selAll().then((das)=>{
        console.log("applyRes-> ", das)
        this.tableData = das.data.list
      })
    },
    selectableStatus:function (row,index){
      if (row.resign.status === 0){
        return true;
      }
    },
    stateChange(row, column) {
      if (row.resign.status === 0) {
        return '审批中'
      }else if (row.resign.status === 1){
        return '审批通过'
      }else {
        return '已失效'
      }
    },
    arLink(){
      this.$router.push({
        path:'/cr',
      })
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      selAll(10,val).then((das)=>{
        console.log("das-> ", das)
        this.tableData = das.data.list
      })
    },
    handleSelectionChange(val) {
      for (let i = 0; i < val.length; i++) {
        this.resIds.push(val[i].resign.id)
      }
    },
    uptById(){
      if (this.resIds.length < 1){
        this.$notify({
          title: '警告',
          message: '请最少选择一条数据后操作！',
          type: 'error'
        })
        return
      }
      uptByResId(this.resIds).then((das)=>{
        if (das.code === 200) {
          this.$notify({
            title: '成功',
            message: '这是一条成功的提示消息',
            type: 'success'
          })
        }else{
          this.$notify({
            title: '失败',
            message: '这是一条失败的提示消息',
            type: 'error'
          })
        }
        this.init()
      })
    },
    delResById(){
      if (this.resIds.length < 1){
        this.$notify({
          title: '警告',
          message: '请最少选择一条数据后操作！',
          type: 'error'
        })
        return
      }
      delByResId(this.resIds).then((das)=>{
        if (das.code === 200) {
          this.$notify({
            title: '成功',
            message: '这是一条成功的提示消息',
            type: 'success'
          })
        }else{
          this.$notify({
            title: '失败',
            message: '这是一条失败的提示消息',
            type: 'error'
          })
        }
        this.init()
      })
    },
  }
}
</script>

<style lang="scss" scoped>
@import "../../../assets/css/personnelCss/RecruitHeadcount";
</style>